<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <script type="text/javascript" src="${ctx}/appjs/elec/elecTemp3.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=52fb647990eb9361188e614e247741ab"></script>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css?v=20180322"/>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

</head>


<style>
    .bootstrap-table{
        height: 500px;}

    #layui-layer-iframe1 .panel-body{display: none;}
    .marker-route {
        position: relative;
        margin: 0 auto;
        /* left: 0.5rem; */
        width: 0.08rem;
        height: 0.08rem;
        background: #2229FB;
        border: 1px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        z-index: 9999999999;
        text-align: center;
        font-size: 1.2rem;
        color: #000;
        box-shadow: 0px 0px 3px 3px rgba(34, 41, 251, 0.5);
    }

    #container {
        margin-top: 20px;
        height: 500px;
        position: relative
    }

    .Level_stationName {
        width: 55%;
    }

    .loadingShade {
        position: absolute;
        left: 0;
        top: 0rem;
        z-index: 100;
        width: 100%;
        height: 1.35rem;
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
    }

    .loadingShade img {
        height: 100%;
        /*margin-top: -0.35rem;*/
    }


</style>

<script type="text/javascript">


    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>设备管理</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>地图预览</strong>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back();javascript:window.location.reload()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });

</script>

<body class="gray-bg">
<div class="wrapper wrapper-content ">


    <div class="bottomBox">
        <div class="leftDiv1" style="width: 900px ;height: 700px;">
            <div class="titleBorder"><span class="titlePiece"></span><span class="orderInfoTitleFont">地图列表</span>   </div>
            <div id="container"> </div>
        </div>
        <div class="powerList" style="width: 900px ;height: 700px;">
            <div class="titleBorder"><span class="titlePiece"></span><span class="orderInfoTitleFont">站点列表</span>   </div>
            <table id="exampleTable" data-mobile-responsive="true">
            </div>
        </div>
    </div>
</div>

<script>
    pile.init();
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        mapStyle: "amap://styles/1304bcaddf7703edd715133571354678",
        resizeEnable: true,
        zoom: 10,
        center: [113.603901,22.910108],
        viewMode :"3D",
    });
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'LB',
            noIpLocate: 1,
            // panToLocation: true,
        });
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });

    //解析定位结果
    function onComplete(data) {
        var str = ['定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        if (data.accuracy) {
            str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('tip').innerHTML = str.join('<br>');
    }

    //解析定位错误信息
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败';
    }



    function getChargeMap() {
        $.ajax({
            "type": "post",
            "url": "${ctx}/console/selectStationAndLatiLong",
            "data": {},
            "success": function (data) {
                // console.warn(data)
                // data.data.length = 50
                var markers = [];
                for (var i = 0; i < data.data.length; i++) {
                    var activeIcon = '<div class="marker-route marker-marker-bus-from blue button"></div>'
                    markers.push({
                        longitude: data.data[i].longitude,
                        latitude: data.data[i].latitude,
                        content: activeIcon,
                        stationName: data.data[i].stationName,
                        elecStationId: data.data[i].elecStationId
                    })
                    // console.warn(markers)
                }

                markers.forEach(function (marker) {
                    console.console(marker)
                    var bgimg = marker.activeImg;
                    var marker = new AMap.Marker({ //添加自定义点标记
                        map: map,
                        position: [marker.longitude, marker.latitude], //基点位置
                        offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置
                        draggable: false,  //是否可拖动
                        // content: '<div  class="'+bgimg+'"  href="'+marker.href+'"></div>' ,  //自定义点标记覆盖物内容
                        content: marker.content,
                        stationName: marker.stationName,
                        elecStationId: marker.elecStationId

                    });
                    marker.on("click", function (e) {
                        console.log(e)
                        var infoWindow = new AMap.InfoWindow({
                            anchor: 'bottom-center',
                            content: "<span style='padding:0 8px'>" + e.target.w.stationName + "</span> ",
                            offset: new AMap.Pixel(0, -25),

                        });
                        infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat])
                        showElectric(e.target.w.elecStationId,e.target.w.stationName)
                    })


                });


            }
        })
    }

    getChargeMap();
    function showElectric(elecStationId,stationName){
            layer.open({
                btn: ['确定'],
                type: 2,
                title: stationName,
                shadeClose: true,
                shade: 0.8,
                area: ['900px', '700px'],
                content: '${ctx}/elecPile/map/'+elecStationId,//iframe弹层的页面地址
                yes: function (index, layero) {
                    layer.close(index);
                }
            });
    }
    //移动坐标
    function moveMap(x,y){
        map.setZoomAndCenter(14, [x,y]);
    }

</script>

</body>
</html>